﻿
@{
    ViewData["Title"] = "Advanced";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Advanced Form Elements</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Forms</a>
            </li>
            <li class="active breadcrumb-item">
                <strong>Advanced Form Elements</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-5">

            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Knob input <small>http://anthonyterrien.com/knob/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Knob - Dial
                    </h3>
                    <p>
                        Easily create knob input style.
                    </p>
                    <div class="text-center">
                        <small>Simple knob example</small><br /><br />
                        <div class="m-r-md inline">
                            <input type="text" value="75" class="dial m-r-sm" data-fgcolor="#1AB394" data-width="85" data-height="85" />
                        </div>
                        <div class="m-r-md inline">
                            <input type="text" value="25" class="dial m-r" data-fgcolor="#1AB394" data-width="85" data-height="85" />
                        </div>
                        <div class="m-r-md inline">
                            <input type="text" value="50" class="dial m-r" data-fgcolor="#1AB394" data-width="85" data-height="85" />
                        </div>
                    </div>
                    <div class="text-center">
                        <small>Dynamic knob example</small><br /><br />
                        <div class="m-r-md inline">
                            <input type="text" value="75" class="dial m-r-sm" data-fgcolor="#ED5565" data-width="85" data-height="85" data-cursor=true data-thickness=.3 />
                        </div>
                        <div class="m-r-md inline">
                            <input type="text" value="25" class="dial m-r" data-fgcolor="#ED5565" data-width="85" data-height="85" data-step="1000" data-min="-15000" data-max="15000" data-displayprevious=true />
                        </div>
                        <div class="m-r-md inline">
                            <input type="text" value="60" class="dial m-r" data-fgcolor="#ED5565" data-width="85" data-height="85" data-angleoffset=-125 data-anglearc=250 />
                        </div>
                    </div>
                </div>
            </div>
          
        </div>
        <div class="col-lg-7">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Range Slider <small>https://github.com/IonDen/ion.rangeSlider</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Sliders
                    </h3>
                    <p>
                        Are perfect for range select option.
                    </p>
                    <div class="m-b-sm">
                        <small><strong>Example of:</strong> Set diapason from 0 to 5000, Adding postfix "+" to max value, Set slider type to double, Dollar symbol as prefix.  </small>
                    </div>
                    <input id="ionrange_1" />

                    <div class="m-b-sm m-t">
                        <small><strong>Example of:</strong> Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid  </small>
                    </div>
                    <input id="ionrange_2" />

                    <div class="m-b-sm m-t">
                        <small><strong>Example of:</strong> Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix  </small>
                    </div>
                    <input id="ionrange_3" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>TouchSpin <small>http://www.virtuosoft.eu/code/bootstrap-touchspin/</small></h5>
                </div>
                <div class="ibox-content">
                    <p>
                        A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.
                    </p>

                    <div class="row">
                        <div class="col-md-4">

                            <p class="font-bold">
                                Basic example with empty value
                            </p>

                            <input class="touchspin1" type="text" value="" name="demo1">
                        </div>
                        <div class="col-md-4">
                            <p class="font-bold">
                                Example with postfix
                            </p>
                            <input class="touchspin2" type="text" value="55" name="demo2">
                        </div>
                        <div class="col-md-4">

                            <p class="font-bold">
                                Example with vertical button alignment:
                            </p>
                            <input class="touchspin3" type="text" value="" name="demo3">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Dual Listbox</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
                    </p>

                    <form id="form" action="#" class="wizard-big">
                        <select class="form-control dual_select" multiple>
                            <option value="United States">United States</option>
                            <option value="United Kingdom">United Kingdom</option>
                            <option value="Australia">Australia</option>
                            <option selected value="Austria">Austria</option>
                            <option value="Bahamas">Bahamas</option>
                            <option value="Barbados">Barbados</option>
                            <option value="Belgium">Belgium</option>
                            <option value="Bermuda">Bermuda</option>
                            <option value="Brazil">Brazil</option>
                            <option value="Bulgaria">Bulgaria</option>
                            <option value="Cameroon">Cameroon</option>
                            <option value="Canada">Canada</option>
                        </select>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-lg-12">

            <div class="ibox">
                <div class="ibox-title">
                    <h5>Select2 <small>https://select2.github.io/</small></h5>
                </div>
                <div class="ibox-content">

                    <div class="row">
                        <div class="col-md-4">
                            <p>
                                Select2 is a jQuery based replacement for select boxes. It can take a regular select box and turn it into:
                            </p>
                            <select class="select2_demo_1 form-control">
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                                <option value="4">Option 4</option>
                                <option value="5">Option 5</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <p>
                                A placeholder value can be defined and will be displayed until a selection is made.
                            </p>
                            <select class="select2_demo_3 form-control">
                                <option></option>
                                <option value="Bahamas">Bahamas</option>
                                <option value="Bahrain">Bahrain</option>
                                <option value="Bangladesh">Bangladesh</option>
                                <option value="Barbados">Barbados</option>
                                <option value="Belarus">Belarus</option>
                                <option value="Belgium">Belgium</option>
                                <option value="Belize">Belize</option>
                                <option value="Benin">Benin</option>
                            </select>

                        </div>
                        <div class="col-md-4">
                            <p>
                                Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.
                            </p>
                            <select class="select2_demo_2 form-control" multiple="multiple">
                                <option value="Mayotte">Mayotte</option>
                                <option value="Mexico">Mexico</option>
                                <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                                <option value="Moldova, Republic of">Moldova, Republic of</option>
                                <option value="Monaco">Monaco</option>
                                <option value="Mongolia">Mongolia</option>
                                <option value="Montenegro">Montenegro</option>
                                <option value="Montserrat">Montserrat</option>
                                <option value="Morocco">Morocco</option>
                                <option value="Mozambique">Mozambique</option>
                                <option value="Myanmar">Myanmar</option>
                                <option value="Namibia">Namibia</option>
                                <option value="Nauru">Nauru</option>
                                <option value="Nepal">Nepal</option>
                                <option value="Netherlands">Netherlands</option>
                                <option value="New Caledonia">New Caledonia</option>
                                <option value="New Zealand">New Zealand</option>
                                <option value="Nicaragua">Nicaragua</option>
                            </select>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Range Slider <small>http://refreshless.com/nouislider/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Range Slider
                    </h3>
                    <p>
                        Simple and clean range select slider.
                    </p>
                    <div class="row m-b-lg">
                        <div class="col-lg-12">
                            <div id="drag-fixed" class="slider_red"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <p class="font-bold">Basic example</p>
                            <div id="basic_slider"></div>
                        </div>
                        <div class="col-lg-6">
                            <p class="font-bold">Range select example</p>
                            <div id="range_slider"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <div class="row">

        <div class="col-lg-5">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Data Picker <small>https://github.com/eternicode/bootstrap-datepicker</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Data picker
                    </h3>
                    <p>
                        Simple and easy select a time for a text input using your mouse.
                    </p>

                    <div class="form-group" id="data_1">
                        <label class="font-normal">Simple data input format</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2014">
                        </div>
                    </div>

                    <div class="form-group" id="data_2">
                        <label class="font-normal">One Year view</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="08/25/2014">
                        </div>
                    </div>

                    <div class="form-group" id="data_3">
                        <label class="font-normal">Decade view</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="10/11/2013">
                        </div>
                    </div>

                    <div class="form-group" id="data_4">
                        <label class="font-normal">Month select</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="07/01/2014">
                        </div>
                    </div>

                    <div class="form-group" id="data_5">
                        <label class="font-normal">Range select</label>
                        <div class="input-daterange input-group" id="datepicker">
                            <input type="text" class="form-control-sm form-control" name="start" value="05/14/2014" />
                            <span class="input-group-addon">to</span>
                            <input type="text" class="form-control-sm form-control" name="end" value="05/22/2014" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <h5>ClockPicker <small>http://weareoutman.github.io/clockpicker/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        ClockPicker
                    </h3>
                    <p>
                        A clock-style timepicker for Bootstrap (or jQuery).
                    </p>

                    <div class="input-group clockpicker" data-autoclose="true">
                        <input type="text" class="form-control" value="09:30">
                        <span class="input-group-addon">
                            <span class="fa fa-clock-o"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Date Range Picker <small>http://www.daterangepicker.com/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Date Range Picker
                    </h3>
                    <p>
                        A JavaScript widget for choosing date ranges.
                        Designed to work with the Bootstrap CSS framework.
                    </p>
                    <h4>Minimal example</h4>
                    <p>
                        The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.
                    </p>
                    <input class="form-control" type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

                    <h4>All options example</h4>
                    <div id="reportrange" class="form-control">
                        <i class="fa fa-calendar"></i>
                        <span></span> <b class="caret"></b>
                    </div>
                </div>
            </div>

            <div class="ibox ">
                <div class="ibox-title  back-change">
                    <h5>Color picker <small>http://mjolnic.github.io/bootstrap-colorpicker/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Colorpicker
                    </h3>
                    <p>
                        Colorpicker plugin for the Twitter Bootstrap toolkit.
                    </p>

                    <h5>As normal input</h5>
                    <input type="text" class="form-control demo1" value="#5367ce" />
                    <h5>As a link</h5>
                    <a data-color="rgb(255, 255, 255)" id="demo_apidemo" class="btn small demo colorpicker-element" href="#">Change background color</a>
                    <br />
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Bootstrap Tags Input</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        jQuery plugin providing a Twitter Bootstrap user interface for managing tags
                    </p>


                    <p class="font-bold">
                        Basic example with few initial tags
                    </p>

                    <input class="tagsinput form-control" type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" />


                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Input Mask <small>http://jasny.github.io/bootstrap/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <h3>
                        Input Mask
                    </h3>
                    <p>
                        Input masks allows a user to more easily enter data where you would like them to enter the data in a certain format.
                    </p>
                    <form class="m-t-md" action="#">
                        <div class="form-group row">
                            <label class="col-sm-2 col-sm-2 col-form-label">ISBN 1</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="">
                                <span class="form-text">999-99-999-9999-9</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">ISBN 2</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="999 99 999 9999 9" placeholder="">
                                <span class="form-text">999 99 999 9999 9</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">ISBN 3</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="999/99/999/9999/9" placeholder="">
                                <span class="form-text">999/99/999/9999/9</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">IPV4</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="999.999.999.9999" placeholder="">
                                <span class="form-text">192.168.100.200</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Tax ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="99-9999999" placeholder="">
                                <span class="form-text">99-9999999</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Phone</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="(999) 999-9999" placeholder="">
                                <span class="form-text">(999) 999-9999</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Currency</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="$ 999,999,999.99" placeholder="">
                                <span class="form-text">$ 999,999,999.99</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Date</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" data-mask="99/99/9999" placeholder="">
                                <span class="form-text">dd/mm/yyyy</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Switcher <small>http://abpetkov.github.io/switchery/</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="#" class="dropdown-item">Config option 1</a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <h3>
                            Switcher
                        </h3>
                        <p>
                            Is iOS 7 style switches for your checkboxes.
                        </p>
                        <input type="checkbox" class="js-switch" checked />
                        <input type="checkbox" class="js-switch_2" checked />
                        <br />
                        <br />
                        <input type="checkbox" class="js-switch_3" />
                        <input type="checkbox" class="js-switch_4" checked />
                    </div>
                </div>
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Custom switch </h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="#" class="dropdown-item">Config option 1</a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <h4>
                            Custom switch
                        </h4>
                        <p>
                            Pure CSS3 On/Off flipswitches with animated transitions.
                        </p>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
                                <label class="onoffswitch-label" for="example1">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>

                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" class="onoffswitch-checkbox" id="example2">
                                <label class="onoffswitch-label" for="example2">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" checked disabled class="onoffswitch-checkbox" id="example3">
                                <label class="onoffswitch-label" for="example3">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>

                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" disabled class="onoffswitch-checkbox" id="example4">
                                <label class="onoffswitch-label" for="example4">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title  back-change">
                    <h5>Image cropper <small>http://fengyuanchen.github.io/cropper/</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        A simple jQuery image cropping plugin.
                    </p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="image-crop">
                                <img src="~/Images/p3.jpg">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h4>Preview image</h4>
                            <div class="img-preview img-preview-sm"></div>
                            <h4>Comon method</h4>
                            <p>
                                You can upload new image to crop container and easy download new cropped image.
                            </p>
                            <div>
                                <label title="Upload image file" for="inputImage" class="btn btn-primary">
                                    <input type="file" accept="image/*" name="file" id="inputImage" style="display:none">
                                    Upload image
                                </label>
                            </div>
                            <a href="" id="download" class="btn btn-primary">Download</a>
                            <h4>Other method</h4>
                            <p>
                                You may set cropper options with <code>$({image}).cropper(options)</code>
                            </p>
                            <div class="btn-group">
                                <button class="btn btn-white" id="zoomIn" type="button">Zoom In</button>
                                <button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button>
                                <button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button>
                                <button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button>
                                <button class="btn btn-warning" id="setDrag" type="button">New crop</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        <div class="ibox-title  back-change">
                            <h5>Awesome bootstrap checkbox</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li>
                                        <a href="#" class="dropdown-item">Config option 1</a>
                                    </li>
                                    <li>
                                        <a href="#" class="dropdown-item">Config option 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">

                            <h4>Checkboxes</h4>
                            <form role="form">
                                <div class="row">
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Basic
                                            </legend>
                                            <p>
                                                Supports bootstrap theme colors: <code>.abc-checkbox-primary</code>, <code>.abc-checkbox-info</code> etc.
                                            </p>
                                            <div class="form-check abc-checkbox">
                                                <input class="form-check-input" id="checkbox1" type="checkbox">
                                                <label class="form-check-label" for="checkbox1">
                                                    Default
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-primary">
                                                <input class="form-check-input" id="checkbox2" type="checkbox" checked="">
                                                <label class="form-check-label" for="checkbox2">
                                                    Primary
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-success">
                                                <input class="form-check-input" id="checkbox3" type="checkbox">
                                                <label class="form-check-label" for="checkbox3">
                                                    Success
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-info">
                                                <input class="form-check-input" id="checkbox4" type="checkbox">
                                                <label class="form-check-label" for="checkbox4">
                                                    Info
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-warning">
                                                <input class="form-check-input" id="checkbox5" type="checkbox" checked="">
                                                <label class="form-check-label" for="checkbox5">
                                                    Warning
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-danger">
                                                <input class="form-check-input" id="checkbox6" type="checkbox" checked="">
                                                <label class="form-check-label" for="checkbox6">
                                                    Check me out
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Circled
                                            </legend>
                                            <p>
                                                <code>.abc-checkbox-circle</code> for roundness.
                                            </p>
                                            <div class="form-check abc-checkbox abc-checkbox-circle">
                                                <input class="form-check-input" id="checkbox7" type="checkbox">
                                                <label class="form-check-label" for="checkbox7">
                                                    Simply Rounded
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-info abc-checkbox-circle">
                                                <input class="form-check-input" id="checkbox8" type="checkbox" checked="">
                                                <label class="form-check-label" for="checkbox8">
                                                    Me too
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Disabled
                                            </legend>
                                            <p>
                                                Disabled state also supported.
                                            </p>
                                            <div class="form-check abc-checkbox">
                                                <input class="form-check-input" id="checkbox9" type="checkbox" disabled="">
                                                <label class="form-check-label" for="checkbox9">
                                                    Can't check this
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-success">
                                                <input class="form-check-input" id="checkbox10" type="checkbox" disabled="" checked="">
                                                <label class="form-check-label" for="checkbox10">
                                                    This too
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-warning abc-checkbox-circle">
                                                <input class="form-check-input" id="checkbox11" type="checkbox" disabled="" checked="">
                                                <label class="form-check-label" for="checkbox11">
                                                    And this
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Without label text
                                            </legend>
                                            <div class="form-check abc-checkbox">
                                                <input class="form-check-input" type="checkbox" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
                                                <label class="form-check-label" for="singleCheckbox1"></label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-primary">
                                                <input class="form-check-input" type="checkbox" id="singleCheckbox2" value="option2" checked="" aria-label="Single checkbox Two">
                                                <label class="form-check-label" for="singleCheckbox2"></label>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Indeterminate state
                                            </legend>
                                            <div class="form-check abc-checkbox abc-checkbox-primary">
                                                <input class="form-check-input" id="indeterminateCheckbox" type="checkbox" onclick="changeState(this)">
                                                <label class="form-check-label" for="indeterminateCheckbox"></label>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Inline checkboxes
                                            </legend>
                                            <div class="form-check abc-checkbox form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                                <label class="form-check-label" for="inlineCheckbox1"> One </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-success form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked="">
                                                <label class="form-check-label" for="inlineCheckbox2"> Two </label>
                                            </div>
                                            <div class="form-check abc-checkbox form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1">
                                                <label class="form-check-label" for="inlineCheckbox3"> Three </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </form>
                            <h4>Radios</h4>
                            <form role="form">
                                <div class="row">
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Basic
                                            </legend>
                                            <p>
                                                Supports bootstrap theme colors: <code>.abc-radio-primary</code>, <code>.abc-radio-danger</code> etc.
                                            </p>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-check abc-radio">
                                                        <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked="">
                                                        <label class="form-check-label" for="radio1">
                                                            Small
                                                        </label>
                                                    </div>
                                                    <div class="form-check abc-radio">
                                                        <input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
                                                        <label class="form-check-label" for="radio2">
                                                            Big
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-check abc-radio abc-radio-danger">
                                                        <input class="form-check-input" type="radio" name="radio2" id="radio3" value="option1">
                                                        <label class="form-check-label" for="radio3">
                                                            Next
                                                        </label>
                                                    </div>
                                                    <div class="form-check abc-radio abc-radio-danger">
                                                        <input class="form-check-input" type="radio" name="radio2" id="radio4" value="option2" checked="">
                                                        <label class="form-check-label" for="radio4">
                                                            One
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Disabled
                                            </legend>
                                            <p>
                                                Disabled state also supported.
                                            </p>
                                            <div class="form-check abc-radio abc-radio-danger">
                                                <input class="form-check-input" type="radio" name="radio3" id="radio5" value="option1" disabled="">
                                                <label class="form-check-label" for="radio5">
                                                    Next
                                                </label>
                                            </div>
                                            <div class="form-check abc-radio">
                                                <input class="form-check-input" type="radio" name="radio3" id="radio6" value="option2" checked="" disabled="">
                                                <label class="form-check-label" for="radio6">
                                                    One
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                As Checkboxes
                                            </legend>
                                            <p>
                                                Radios can be made to look like checkboxes.
                                            </p>
                                            <div class="form-check abc-checkbox abc-checkbox">
                                                <input class="form-check-input" type="radio" name="radio4" id="radio7" value="option1" checked="">
                                                <label class="form-check-label" for="radio7">
                                                    Default
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-success">
                                                <input class="form-check-input" type="radio" name="radio4" id="radio8" value="option2">
                                                <label class="form-check-label" for="radio8">
                                                    Success
                                                </label>
                                            </div>
                                            <div class="form-check abc-checkbox abc-checkbox-danger">
                                                <input class="form-check-input" type="radio" name="radio4" id="radio9" value="option3">
                                                <label class="form-check-label" for="radio9">
                                                    Danger
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Without label text
                                            </legend>
                                            <div class="form-check abc-radio">
                                                <input class="form-check-input" type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
                                                <label class="form-check-label" for="singleRadio1"></label>
                                            </div>
                                            <div class="form-check abc-radio abc-radio-success">
                                                <input class="form-check-input" type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked="" aria-label="Single radio Two">
                                                <label class="form-check-label" for="singleRadio2"></label>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <fieldset>
                                            <legend>
                                                Inline radios
                                            </legend>
                                            <div class="form-check abc-radio abc-radio-info form-check-inline">
                                                <input class="form-check-input" type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
                                                <label class="form-check-label" for="inlineRadio1"> Inline One </label>
                                            </div>
                                            <div class="form-check abc-radio form-check-inline">
                                                <input class="form-check-input" type="radio" id="inlineRadio2" value="option2" name="radioInline">
                                                <label class="form-check-label" for="inlineRadio2"> Inline Two </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/iCheck/custom.css" />
        <link rel="stylesheet" href="~/lib/clockpicker/clockpicker.css" />
        <link rel="stylesheet" href="~/lib/daterangepicker/daterangepicker-bs3.css" />
        <link rel="stylesheet" href="~/lib/switchery/switchery.css" />
        <link rel="stylesheet" href="~/lib/ionRangeSlider/ion.rangeSlider.css" />
        <link rel="stylesheet" href="~/lib/colorpicker/bootstrap-colorpicker.min.css" />
        <link rel="stylesheet" href="~/lib/nouslider/jquery.nouislider.css" />
        <link rel="stylesheet" href="~/lib/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
        <link rel="stylesheet" href="~/lib/jasny-bootstrap/dist/css/jasny-bootstrap.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-datepicker/dist/css/datepicker3.css" />
        <link rel="stylesheet" href="~/lib/cropper/dist/cropper.min.css" />
        <link rel="stylesheet" href="~/lib/select2/dist/css/select2.min.css" />
        <link rel="stylesheet" href="~/lib/select2/dist/css/select2-bootstrap4.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="~/lib/iCheck/custom.css" />
        <link rel="stylesheet" href="~/lib/clockpicker/clockpicker.css" />
        <link rel="stylesheet" href="~/lib/daterangepicker/daterangepicker-bs3.css" />
        <link rel="stylesheet" href="~/lib/switchery/switchery.css" />
        <link rel="stylesheet" href="~/lib/ionRangeSlider/ion.rangeSlider.css" />
        <link rel="stylesheet" href="~/lib/colorpicker/bootstrap-colorpicker.min.css" />
        <link rel="stylesheet" href="~/lib/nouslider/jquery.nouislider.css" />
        <link rel="stylesheet" href="~/lib/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
        <link rel="stylesheet" href="~/lib/jasny-bootstrap/dist/css/jasny-bootstrap.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-datepicker/dist/css/datepicker3.css" />
        <link rel="stylesheet" href="~/lib/cropper/dist/cropper.min.css" />
        <link rel="stylesheet" href="~/lib/select2/dist/css/select2.min.css" />
        <link rel="stylesheet" href="~/lib/select2/dist/css/select2-bootstrap4.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.css" />
    </environment>
}

@section Scripts {
    <environment names="Development">
        <script src="~/lib/moment/moment.js"></script>
        <script src="~/lib/iCheck/icheck.min.js"></script>
        <script src="~/lib/clockpicker/clockpicker.js"></script>
        <script src="~/lib/switchery/switchery.js"></script>
        <script src="~/lib/daterangepicker/daterangepicker.js"></script>
        <script src="~/lib/ionRangeSlider/ion.rangeSlider.min.js"></script>
        <script src="~/lib/colorpicker/bootstrap-colorpicker.min.js"></script>
        <script src="~/lib/nouslider/jquery.nouislider.min.js"></script>
        <script src="~/lib/jasny-bootstrap/dist/js/jasny-bootstrap.js"></script>
        <script src="~/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
        <script src="~/lib/jknob/dist/jquery.knob.min.js"></script>
        <script src="~/lib/cropper/dist/cropper.min.js"></script>
        <script src="~/lib/select2/dist/js/select2.full.min.js"></script>
        <script src="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
        <script src="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
        <script src="~/lib/dualListbox/jquery.bootstrap-duallistbox.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/lib/moment/min/moment.min.js"></script>
        <script src="~/lib/iCheck/icheck.min.js"></script>
        <script src="~/lib/clockpicker/clockpicker.js"></script>
        <script src="~/lib/switchery/switchery.js"></script>
        <script src="~/lib/daterangepicker/daterangepicker.js"></script>
        <script src="~/lib/ionRangeSlider/ion.rangeSlider.min.js"></script>
        <script src="~/lib/colorpicker/bootstrap-colorpicker.min.js"></script>
        <script src="~/lib/nouslider/jquery.nouislider.min.js"></script>
        <script src="~/lib/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
        <script src="~/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
        <script src="~/lib/jknob/dist/jquery.knob.min.js"></script>
        <script src="~/lib/cropper/dist/cropper.min.js"></script>
        <script src="~/lib/select2/dist/js/select2.full.min.js"></script>
        <script src="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
        <script src="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
        <script src="~/lib/dualListbox/jquery.bootstrap-duallistbox.js"></script>
    </environment>

    <script type="text/javascript">
        $(document).ready(function () {

            $('.tagsinput').tagsinput({
                tagClass: 'label label-primary'
            });

            $('.dual_select').bootstrapDualListbox({
                selectorMinimalHeight: 160
            });

            var $image = $(".image-crop > img")
            var $cropped = $($image).cropper({
                aspectRatio: 1.618,
                preview: ".img-preview",
                done: function (data) {
                    // Output the result data for cropping image.
                }
            });

            var $inputImage = $("#inputImage");
            if (window.FileReader) {
                $inputImage.change(function () {
                    var fileReader = new FileReader(),
                        files = this.files,
                        file;

                    if (!files.length) {
                        return;
                    }

                    file = files[0];

                    if (/^image\/\w+$/.test(file.type)) {
                        fileReader.readAsDataURL(file);
                        fileReader.onload = function () {
                            $inputImage.val("");
                            $image.cropper("reset", true).cropper("replace", this.result);
                        };
                    } else {
                        showMessage("Please choose an image file.");
                    }
                });
            } else {
                $inputImage.addClass("hide");
            }

            $("#download").click(function (link) {
                link.target.href = $cropped.cropper('getCroppedCanvas', { width: 620, height: 520 }).toDataURL("image/png").replace("image/png", "application/octet-stream");
                link.target.download = 'cropped.png';
            });

            $("#zoomIn").click(function () {
                $image.cropper("zoom", 0.1);
            });

            $("#zoomOut").click(function () {
                $image.cropper("zoom", -0.1);
            });

            $("#rotateLeft").click(function () {
                $image.cropper("rotate", 45);
            });

            $("#rotateRight").click(function () {
                $image.cropper("rotate", -45);
            });

            $("#setDrag").click(function () {
                $image.cropper("setDragMode", "crop");
            });

            $('#data_1 .input-group.date').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

            $('#data_2 .input-group.date').datepicker({
                startView: 1,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            $('#data_3 .input-group.date').datepicker({
                startView: 2,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            $('#data_4 .input-group.date').datepicker({
                minViewMode: 1,
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                todayHighlight: true
            });

            $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            var elem = document.querySelector('.js-switch');
            var switchery = new Switchery(elem, { color: '#1AB394' });

            var elem_2 = document.querySelector('.js-switch_2');
            var switchery_2 = new Switchery(elem_2, { color: '#ED5565' });

            var elem_3 = document.querySelector('.js-switch_3');
            var switchery_3 = new Switchery(elem_3, { color: '#1AB394' });

            var elem_4 = document.querySelector('.js-switch_4');
            var switchery_4 = new Switchery(elem_4, { color: '#f8ac59' });
            switchery_4.disable();

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $('.demo1').colorpicker();

            var divStyle = $('.back-change')[0].style;
            $('#demo_apidemo').colorpicker({
                color: divStyle.backgroundColor
            }).on('changeColor', function (ev) {
                divStyle.backgroundColor = ev.color.toHex();
            });

            $('.clockpicker').clockpicker();

            $('input[name="daterange"]').daterangepicker();

            $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

            $('#reportrange').daterangepicker({
                format: 'MM/DD/YYYY',
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                minDate: '01/01/2012',
                maxDate: '12/31/2015',
                dateLimit: { days: 60 },
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                timePickerIncrement: 1,
                timePicker12Hour: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                opens: 'right',
                drops: 'down',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-primary',
                cancelClass: 'btn-default',
                separator: ' to ',
                locale: {
                    applyLabel: 'Submit',
                    cancelLabel: 'Cancel',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                }
            }, function (start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            });


             $(".select2_demo_1").select2({
                theme: 'bootstrap4',
            });
            $(".select2_demo_2").select2({
                theme: 'bootstrap4',
            });
            $(".select2_demo_3").select2({
                theme: 'bootstrap4',
                placeholder: "Select a state",
                allowClear: true
            });
            $(".touchspin1").TouchSpin({
                buttondown_class: 'btn btn-white',
                buttonup_class: 'btn btn-white'
            });

            $(".touchspin2").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,
                decimals: 2,
                boostat: 5,
                maxboostedstep: 10,
                postfix: '%',
                buttondown_class: 'btn btn-white',
                buttonup_class: 'btn btn-white'
            });

            $(".touchspin3").TouchSpin({
                verticalbuttons: true,
                buttondown_class: 'btn btn-white',
                buttonup_class: 'btn btn-white'
            });

        });


        $("#ionrange_1").ionRangeSlider({
            skin: "flat",
            min: 0,
            max: 5000,
            type: 'double',
            prefix: "$",
            maxPostfix: "+",
            grid: true
        });

        $("#ionrange_2").ionRangeSlider({
            skin: "flat",
            min: 0,
            max: 10,
            type: 'single',
            step: 0.1,
            postfix: " carats",
            grid: true
        });

        $("#ionrange_3").ionRangeSlider({
            skin: "flat",
            min: -50,
            max: 50,
            from: 0,
            postfix: "°",
            grid: true
        });

        $(".dial").knob();

        $("#basic_slider").noUiSlider({
            start: 40,
            behaviour: 'tap',
            connect: 'upper',
            range: {
                'min': 20,
                'max': 80
            }
        });

        $("#range_slider").noUiSlider({
            start: [40, 60],
            behaviour: 'drag',
            connect: true,
            range: {
                'min': 20,
                'max': 80
            }
        });

        $("#drag-fixed").noUiSlider({
            start: [40, 60],
            behaviour: 'drag-fixed',
            connect: true,
            range: {
                'min': 20,
                'max': 80
            }
        });
    </script>
}